<script setup lang="ts">
const departments = {
    "学工部": 1,
    "后勤部": 2,
    "网信部": 3,
    "宣传部": 4,
    "行政部": 5,
}

const categories = {
    "家具": 1,
    "电子设备": 2,
    "通信设备": 3,
    "办公设备": 4
}

const props = defineProps({
    dialog_visible: {
        type: Boolean,
        required: true
    },
})

const emits = defineEmits(['update:dialog_visible', 'update:form'])
const dialog_visible_2 = ref(props.dialog_visible)

watch(() => props.dialog_visible, (newVal) => {
    dialog_visible_2.value = newVal
})

watch(() => dialog_visible_2.value, (newVal) => {
    emits('update:dialog_visible', newVal)
})

const form = reactive({
    department: null,
    category: null,
    name: null,
    address: null
})

const emitForm = () => {
    emits('update:form', form)
    dialog_visible_2.value = false
}

const propertyList = ref<string[]>([])

</script>

<template>
    <el-dialog v-model="dialog_visible_2" title="编辑" :before-close="(() => { })()">
        <div style="margin:0 25%;">
            <el-checkbox-group v-model="propertyList">
                <el-checkbox label="部门" value="部门" />
                <el-checkbox label="类别" value="类别" />
                <el-checkbox label="名称" value="名称" />
                <el-checkbox label="地点" value="地点" />
            </el-checkbox-group>
        </div>

        <el-form v-model="form" style="width: 50%;margin: auto;">
            <el-form-item label="部门" v-show="propertyList.includes('部门')">
                <el-select v-model="form.department" placeholder="部门">
                    <el-option v-for="(v, k, i) in departments" :key="i" :label="k" :value="v" />
                </el-select>
            </el-form-item>

            <el-form-item label="类别" v-show="propertyList.includes('类别')">
                <el-select v-model="form.category" placeholder="类别">
                    <el-option v-for="(v, k, i) in categories" :key="i" :label="k" :value="v" />
                </el-select>
            </el-form-item>

            <el-form-item label="名称" v-show="propertyList.includes('名称')">
                <el-select v-model="form.name" placeholder="名称">
                    <el-option label="电脑" value="电脑" />
                </el-select>
            </el-form-item>

            <el-form-item label="地点" v-show="propertyList.includes('地点')">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button text type="primary" @click="emitForm()">确认</el-button>
                <el-button text type="info" @click="dialog_visible_2 = false">取消</el-button>
            </el-form-item>

        </el-form>
    </el-dialog>
</template>